<template>
	<view class="container full-height">
		<view class="header">
			<view class="flex justify-between align-center p-b12">
				<text class="text-bold f-s28 line-height40">推广大使</text>
				<view class="p-lr12 p-tb8 bg-white flex align-center" style="border-radius: 32rpx;"
					@click="handleToPage('rules')">
					<image src="/static/images/reward/rules.png" class="width-16 height-16 m-r4" mode=""></image>
					<text class="f-w400 line-height-16 f-s11">收益规则</text>
				</view>
			</view>
		</view>
		<view class="main" style="flex:1;overflow-y:auto;" v-if="userInfo.distribution_tech_apply_status == 0">
			<view class="">
				<image src="/static/images/reward/poster.png" class="full-width " mode="widthFix"></image>
			</view>
			<view class="p-16 radius bg-white relative" style="margin-top: -32rpx;z-index: 99;">
				<view class="self-btn height-85" hover-class="pressed" @click="handleApply">
					<text class="text-bold f-s16">立即申请</text>
				</view>
				<view class="flex align-baseline m-t16 p-lr14">
					<u-checkbox-group v-model="checked" @change="handleCheckboxChange">
						<u-checkbox activeColor="#FE3F59" size="28rpx" :name="true"></u-checkbox>
					</u-checkbox-group>
					<view class="f-s12 text-black">
						我已阅读并同意<text class="text-theme"
							@click="handleToPage('/pages/common/document/index?title=推广大使合作协议')">《推广大使合作协议》</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-direction main flex-1" v-if="auditOverlay">
			<view class="radius bg-white flex align-center align-center full-height">
				<view class="flex flex-direction justify-center align-center full-height full-width">
					<image src="/static/images/reward/success.png" class="width-58 height-58" mode=""></image>
					<text class="f-s20 line-height28 f-w500 m-t20">恭喜你</text>
					<text class="text-gray f-s12 m-t10">申请成功，已成为推广大使</text>
					<view class="self-btn m-t30" style="width: 320rpx;height: 80rpx;" hover-class="pressed"
						@click="auditOverlay = false">
						<text class="f-w500 f-s16">开始推广</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-direction main" style="flex:1;overflow-y:auto;"
			v-if="userInfo.distribution_tech_apply_status == 2 && !auditOverlay">
			<view class="relative">
				<view class="absolute flex flex-direction justify-between p-lr16 p-t12 p-b15 text-white full-height"
					style="z-index:999">
					<view class="flex align-center">
						<image :src="detailData.avatar" class="width-24 height-24 round bg-gray" mode=""></image>
						<text class="f-w600 line-height20 f-s15 p-l8">{{detailData.nickname || '-'}}</text>
						<text class="line-height16 f-s11 f-w400 radius-2 m-l6"
							style="padding:0 6rpx;border: 1rpx solid #fff;opacity: 0.5;">推广大使</text>
					</view>
					<view class="flex justify-between align-end">
						<view class="flex flex-direction">
							<text class="text-gray f-s12 line-height17 f-w400">可提现(元)</text>
							<text class="line-height36 text-bold f-s28 m-t4">{{statisticsData.brokerage || 0}}</text>
						</view>
						<view class="bg-white width-80 height-32 radius-6 line-height32 text-center"
							@click="handleToPage('/pages/index/capital/withdraw-deposit')">
							<text class="f-s14 f-w500 line-height16" style="color:#222222">提现</text>
						</view>
					</view>
					<view class="flex">
						<view class="basis-df">
							<text class="text-gray f-s12 p-r6">累计收入(元)</text>
							<text
								class="f-s14 text-bold line-height18">{{statisticsData.all_order_brokerage || 0}}</text>
						</view>
						<view class="basis-df">
							<text class="text-gray f-s12 p-r6">累计提现(元)</text>
							<text class="f-s14 text-bold line-height18">{{statisticsData.withdraw_money || 0}}</text>
						</view>
					</view>
				</view>
				<image src="/static/images/reward/top.png" class="full-width " mode="widthFix"></image>
			</view>
			<view class="bg-white radius m-t10 flex justify-between menu">
				<view class="flex flex-direction align-center menu-item" v-for="(item,index) in menuList" :key="index"
					@click="handleToPage(item.path)">
					<image :src="item.icon" class="width-32 height-32" mode=""></image>
					<text class="f-s11 f-w400 line-height16 m-t6 " style="color:#404040">{{item.text}}</text>
				</view>
			</view>
			<view class="m-t10">
				<image src="/static/images/reward/poster-2.png" mode="widthFix"></image>
			</view>
			<view class="radius bg-white p-b15 m-t10">
				<view class="p-12 flex justify-between">
					<text class="line-height20 f-w600 f-s15">收入统计</text>
				</view>
				<view class="m-t16 p-lr12 flex justify-between">
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">今日收入(元)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.today_order_brokerage || '-'}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">本月收入(元)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.month_order_brokerage || '-'}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">本年收入(元)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.year_order_brokerage || '-'}}</text>
					</view>
				</view>
			</view>
			<view class="radius bg-white p-b15 m-t10">
				<view class="p-12 flex justify-between">
					<text class="line-height20 f-w600 f-s15">邀请统计(用户)</text>
				</view>
				<view class="m-t16 p-lr12 flex justify-between">
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">今日邀请(人)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.today_user || '0'}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">本月邀请(人)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.month_user || '0'}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">累计邀请(人)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.all_user || '0'}}</text>
					</view>
				</view>
			</view>
			<view class="radius bg-white p-b15 m-t10">
				<view class="p-12 flex justify-between">
					<text class="line-height20 f-w600 f-s15">邀请统计(搭搭)</text>
				</view>
				<view class="m-t16 p-lr12 flex justify-between">
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">今日邀请(人)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.today_technician || '0'}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">本月邀请(人)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.month_technician || '0'}}</text>
					</view>
					<view class="flex flex-direction" style="width: 33%;">
						<text class="text-gray f-s12">累计邀请(人)</text>
						<text
							class="m-t8 text-bold f-s20 line-height26 text-black">{{statisticsData.all_technician || '0'}}</text>
					</view>
				</view>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		apply,
		personalInfo,
		rewardStatistics
	} from '@/api/reward'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				auditOverlay:false, // 审核页面是否显示
				checked: false,
				current: 1,
				detailData: {},
				statisticsData: {},
				menuList: [{
					text: '邀请用户',
					icon: '/static/images/reward/menu-1.png',
					path: 'invitation-poster'
				}, {
					text: '邀请搭搭',
					icon: '/static/images/reward/menu-2.png',
					path: 'invitation-poster'
				}, {
					text: '我的邀请',
					icon: '/static/images/reward/menu-3.png',
					path: 'invitation-record'
				}, {
					text: '收益明细',
					icon: '/static/images/reward/menu-4.png',
					path: 'yield'
				}, {
					text: '高级推广大使',
					icon: '/static/images/reward/menu-5.png'
				}]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo || {}
			})
		},
		onTabItemTap() {
			this.$store.dispatch('GetInfo')
		},
		onLoad() {
			this.getDetail()
		},
		onShow() {
			this.getStatistics()
		},
		methods: {
			handleCheckboxChange(val) {
				this.checked = val[0]
			},
			getStatistics() {
				rewardStatistics().then(res => {
					let {
						data
					} = res
					this.statisticsData = data
				})
			},
			getDetail() {
				personalInfo().then(res => {
					let {
						data
					} = res
					this.detailData = data
				})
			},
			handleApply() {
				if (!this.checked) {
					this.$toast("请阅读并同意《推广大使合作协议》")
					return
				}
				this.$modal.loading("正在提交").then(res => {
					apply().then(res => {
						this.$store.dispatch('GetInfo').then(() => {
							this.$toast(res.msg)
							// 申请审核自动通过，但需展示审核页面
							this.auditOverlay = true
							// 更新审核状态
							this.$store.dispatch('GetInfo')
							this.$modal.closeLoading()
						}).catch(() => this.$modal.closeLoading())
					}).catch(() => this.$modal.closeLoading())
				})


			},
			handleNext(index) {
				this.current = index
			},
			handleToPage(path) {
				switch (path) {
					case 'rules':
						this.$tab.navigateTo('rules')
						break;
					case 'invitation-poster':
						this.$tab.navigateTo('invitation-poster')
						break;
					case 'yield':
						this.$tab.navigateTo('yield')
						break;
					default:
						this.$tab.navigateTo(path)
				}

			}
		}
	}
</script>
<style>
	page {

		height: 100%;
	}
</style>
<style scoped lang="scss">
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: inherit;

		.header {
			background-color: inherit;
			z-index: 99;
			position: sticky;
			top: 0;
			padding: 0 24rpx 10rpx 24rpx;
			padding-top: calc(var(--status-bar-height) + 36rpx);
		}

		.main {
			padding: 0 24rpx 36rpx 24rpx;
		}

		.menu {
			padding: 26rpx 20rpx;

			.menu-item {
				width: 20%;
				text-wrap: nowrap;
				white-space: nowrap;
			}
		}
	}
</style>